<template>
  <div style="display: flex; justify-content: center; align-items: center; height: 100vh;"
       @contextmenu.prevent
       @keydown.prevent="blockShortcuts">
    <img v-if="isImage(resourceUrl)" v-bind:src="resourceUrl" alt="Image" download="">
    <audio v-else-if="isAudio(resourceUrl)" controls download="false" controlsList="nodownload">
      <source :src="resourceUrl" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>
    <video v-else-if="isVideo(resourceUrl)" controls download="false" controlsList="nodownload">
      <source :src="resourceUrl" type="video/mp4">
      Your browser does not support the video element.
    </video>
    <iframe v-else-if="isHtml(resourceUrl)" :src="resourceUrl"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      resourceUrl: this.$route.params.resourceUrl
    };
  },
  methods: {
    isImage(url) {
      return url.endsWith('.jpg') || url.endsWith('.jpeg') || url.endsWith('.png') || url.endsWith('.gif');
    },
    isAudio(url) {
      return url.endsWith('.mp3') || url.endsWith('.wav') || url.endsWith('.ogg');
    },
    isVideo(url) {
      return url.endsWith('.mp4') || url.endsWith('.webm') || url.endsWith('.ogg');
    },
    isHtml(url) {
      return url.endsWith('.html') || url.endsWith('.htm');
    },

    blockShortcuts(event) {
    if (event.ctrlKey && (event.key === 's' || event.key === 'p')) {
      event.preventDefault();
      alert('下载和打印功能已被禁用');
    }
  }
  }
};
</script>
